@extends('admin.layouts.app')@section('title', 'admin-layui')
@section("js-head")
    <script></script>
@endsection
@section("content")
    <div class="app-crumb">
        <div class="jing-breadcrumb">
            <i class="jingui-font icon-home"></i>
            <a href="/">首页</a>
            <a><cite>作品管理</cite></a>
        </div>
    </div>
    <div class="app-main">
    <form class="app-form-inner jing-form" action="{{ url('admin/blog') }}" method="post">
            @csrf
            <div class="jing-form-item">
                <div class="jing-inline">
                    <label class="jing-form-label">选择分类</label>
                    <div class="jing-input-inline">
                        <select name="catid" id="catid">
                            @foreach ($sortList as $v)
                                @if ($v['colId'] != 4)
                                    <option value="{{ $v['colId'] }}">{{$v['colTitle']}}</option>
                                @endif
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="jing-form-item">
                <label class="jing-form-label">标题</label>
                <div class="jing-input-block">
                    <input type="text" name="title" lay-verify="title" value="" autocomplete="off" placeholder="请输入标题" class="jing-input">
                </div>
            </div>
            <div class="jing-form-item">
                <label class="jing-form-label">描述</label>
                <div class="jing-input-block">
                    <input type="text" name="description" lay-verify="description" autocomplete="off" placeholder="请输入描述" class="jing-input">
                </div>
            </div>
            <div class="jing-form-item">
                <label class="jing-form-label">作者</label>
                <div class="jing-input-block">
                    <input type="text" name="author" lay-verify="author" autocomplete="off" value="admin" class="jing-input">
                </div>
            </div>
            <div class="jing-form-item">
                <label class="jing-form-label">缩略图</label>
                <div class="jing-input-block">
                    <div class="app-input-item">
                        <img class="thumb-img" id="preview-img" src="/uploads/" alt="">
                    </div>
                    <div class="app-input-item">
                        <button type="button" class="jing-btn" id="uploadImg">上传图片</button>
                        <input type="hidden" name="smallimg" id="smallimg" value="" />
                        <div id="upload-msg" class="upload-error"></div>
                    </div>
                </div>
            </div>
            <div class="jing-form-item">
                <label class="jing-form-label">内容</label>
                <div class="jing-input-block">
                    <textarea name="content" id="content" cols="30" style="width:98%;" rows="20"></textarea>
                </div>
            </div>
            <div class="jing-form-item">
                <div class="jing-input-block">
                    <button type="submit" class="jing-btn" lay-submit="" lay-filter="">提交</button>
                    <button type="button" class="jing-btn jing-btn-primary" onclick="history.go(-1)" id="LAY-component-form-getval">返回</button>
                </div>
            </div>
        </form>
        <!--/result-->
    </div>
    <!--/body-->
@endsection
@section('js')
    <script src="{{ asset('/static/js/tinymce4.7.5/tinymce.min.js') }}"></script>
    <script>
        var editor = tinymce.init({
            selector: '#content',
            language: 'zh_CN',
            // 编辑器宽高
            height: 300,
            // 用到的插件
            plugins: [
                'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
                'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
                'save table contextmenu directionality emoticons template paste textcolor'
            ],
            // 工具栏的配置项
            toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons',
            setup: (editor) => {
                // 抛出 'on-ready' 事件钩子
                editor.on('init', () => {
                })
                // 抛出 'input' 事件钩子，同步value数据
                editor.on('input change undo redo', () => {
                    $('#content').html(editor.getContent())
                })
            }
        });

        layui.use(['form', 'layedit', 'laydate', 'upload'], function () {
            var $ = layui.jquery,
                form = layui.form,
                layer = layui.layer,
                upload = layui.upload

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#uploadImg',
                url: '{{ url('admin/upload') }}', // 上传接口
                before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#preview-img').attr('src', result) // 图片链接（base64）
                    })
                },
                done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败')
                    }
                    $('#smallimg').val(res.data.src)
                    //上传成功
                },
                error: function () {
                    //演示失败状态，并实现重传
                    var demoText = $('#upload-msg')

                    demoText.html('<span style="color: #ff5722;">上传失败</span> <a class="jing-btn jing-btn-xs demo-reload">重试</a>')
                }
            })

            //监听提交
            /*
            form.on('submit(demo1)', function (data) {
                console.log(data)
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false
            })
            */

            //表单取值
            // layui.$('#LAY-component-form-getval').on('click', function () {
            //     var data = form.val('example')
            //     alert(JSON.stringify(data))
            // })

        });
    </script>
@endsection
